/**************************************
 *
 * VLOOK CSS - @media 相关的样式
 * (配合 base.less 进行使用)
 *
 * V15.1
 * 2022-06-25
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// ---------------
// 针对大于该分辨设备的 UI 调整
@media screen and (min-height: 801px) {
    // 工具栏、逐章导航栏不在封面显示时的样式
    :root {
        --v-top-margin:-3px;
    }

    // .v-toolbar.v-float-card,
    // .v-chapter-nav.v-float-card {
    //     top: 10px !important;
    //     border-top-left-radius: var(--v-r-b);
    //     border-top-right-radius: var(--v-r-b);
    // }

    // .v-chapter-nav-prev.noeffect.hover,
    // .v-chapter-nav-prev.effect.hover,
    // .v-chapter-nav-prev.effect::before {
    //     border-top-left-radius: var(--v-r-b);
    // }

    // .v-chapter-nav-next.noeffect.hover,
    // .v-chapter-nav-next.effect::before,
    // .v-chapter-nav-next.effect.hover {
    //     border-top-right-radius: var(--v-r-b);
    // }

    // // 导航中心占位方式时高度
    // .v-nav-center-block {
    //     top: 70px;
    // }
}

// ---------------
// 针对大于该分辨设备的 UI 调整
@media screen and (min-width: 1441px) {
    :root {
        --v-nav-center-width:400px;
        --v-nav-center-hidden-left:-410px;
        --v-toolbar-btn-width:40px;
    }
    // html {
    //     font-size: @fontSizeXL;
    // }

    // 以双栏方式显示，98.5/2*2+1.5*1=100
    #write hr + blockquote,
    #write hr + blockquote + blockquote,
    #write .md-hr + blockquote,
    #write .md-hr + blockquote + blockquote {
        max-width: 49.25% !important;
        min-width: 49.25% !important;
    }
    // 双栏内容之间的样式
    #write hr + blockquote + blockquote,
    #write .md-hr + blockquote + blockquote  {
        margin-left: 1.5% !important;
    }

    // 以三栏方式显示，97.02/3*3+1.49*2=100
    #write hr + hr + blockquote,
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote {
        max-width: 32.34% !important;
        min-width: 32.34% !important;
    }
    // 三栏内容之间的样式
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote  {
        margin-left: 1.49% !important;
    }

    // 以四栏方式显示，95.5/4*4+1.5*3=100
    #write hr + hr + hr + blockquote,
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote {
        max-width: 23.875% !important;
        min-width: 23.875% !important;
    }
    // 四栏内容之间的样式
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote  {
        margin-left: 1.5% !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1280px) {
    // html {
    //     font-size: 1.25em !important;
    // }

    .v-btn-group.hover {
        box-shadow: var(--v-float-shadow), @contrastBorder;
    }
    // 逐章导航 UI
    .v-chapter-nav {
        // left: 20px !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-doc-title,
    .v-chapter-nav-current {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    .v-chapter-nav-prev,
    .v-chapter-nav-next {
        width: 20% !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-prev.noeffect.hover,
    .v-chapter-nav-next.noeffect.hover,
    .v-chapter-nav-prev.effect::before,
    .v-chapter-nav-next.effect::before {
        border-radius: 0 !important;
    }
    // 取消自动换行
    #write table,
    body.typora-export table {
        white-space: pre !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1024px) {
    .v-chapter-nav-prev-text,
    .v-chapter-nav-next-text {
        display: none !important;
    }

    // 页面第1个H6为封面样式
    // #write > pre.md-meta-block:first-child + h6,
    // #write > h6:first-child,
    // // 页面最后 1 个 H6 为封底样式
    // #write > h1:last-child {
    // // #write > h6:last-child {
    //     font-size: 2em !important;
    // }
}

// 针对超大屏手机、iPad 等设备的 UI 调整
@media screen and (min-width: 641px) and (max-width: 1023px) {
    // html { // .v-welcome-page {
    //     font-size: 1.25em !important;
    // }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 550px) {
    // 封面：#write 下 H6 作为第一个元素时
    #write > pre.md-meta-block:first-child + h6, // 有 YAML 的情况
    #write > h6:first-child, // 无 YAML 的情况
    // 封底：#write 下 H6 作为最后一个元素时
    #write > h1:last-child {
        font-size: 2em;
    }
}

// 针对大屏手机的 UI 调整
@media screen and (min-width: 361px) and (max-width: 639px) {
    // html { // .v-welcome-page {
    //     font-size: 1.1em !important;
    // }
}

// 针对中小屏手机的 UI 调整
@media screen and (max-width: 360px) {
    // html { // .v-welcome-page {
    //     font-size: 1em !important;
    // }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用的调整
@media screen and (max-width: 1000px) {
    // ----------------------------------------
    // 纵向显示的整体调整
    // 四栏引用
    #write hr + hr + hr + blockquote,
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote {
        display: block !important;
        max-width: none !important;
        min-width: none !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 四栏引用内容之间
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote  {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用的调整
@media screen and (max-width: 800px) {
    // ----------------------------------------
    // 纵向显示的整体调整
    // 三栏引用
    #write hr + hr + blockquote,
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote,
    // 四栏引用
    #write hr + hr + hr + blockquote,
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote {
        display: block !important;
        max-width: none !important;
        min-width: none !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 三栏引用内容之间
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote,
    // 四栏引用内容之间
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote  {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用的调整
@media screen and (max-width: 600px) {
    // ----------------------------------------
    // 纵向显示的整体调整
    // 双栏引用
    #write hr + blockquote,
    #write hr + blockquote + blockquote,
    #write .md-hr + blockquote,
    #write .md-hr + blockquote + blockquote,
    // 三栏引用
    #write hr + hr + blockquote,
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote,
    // 四栏引用
    #write hr + hr + hr + blockquote,
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote {
        display: block !important;
        max-width: none !important;
        min-width: none !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 双栏引用内容之间
    #write hr + blockquote + blockquote,
    #write .md-hr + blockquote + blockquote,
    // 三栏引用内容之间
    #write hr + hr + blockquote + blockquote,
    #write hr + hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + blockquote + blockquote + blockquote,
    // 四栏引用内容之间
    #write hr + hr + hr + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote,
    #write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
    #write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote  {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对不的 DRP
@media  (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    // 为减少主题包大小，先不启用
    // .v-img-lost {
    //     background-image: url("") !important;
    // }
}

// ---------------
// 针对打印的配置
@media print {
    html {
        font-size: 1em !important;
        // zoom: 1 !important;
    }

    #write {
        margin: 20px !important;
    }

    .v-doc-title {
        opacity: 1;
    }

    // h1,
    // h2,
    // h3,
    // h4,
    // h5,
    // h6 {
    //     box-shadow: none !important;
    //     border-left: 0 !important;
    //     background: none !important;
    // }

    .v-table-cross {
        box-shadow: none !important;
        background: none !important;
    }

    #write table:hover,
    body.typora-export table:hover {
        border-color: var(--tbl-bder) !important;
    }

    // 打印时先关闭 VLOOK 未加载完成前样式
    body.typora-export #write::before {
        display: none !important;
    }

    .v-caption:hover {
        background: var(--pn-c);
    }

    .v-img-invert-dark {
        filter: none;
    }

    blockquote {
        display: block !important;
    }

    .v-welcome-page,
    .v-tool-tips,
    .v-info-tips,
    .v-bottom-tips,
    .v-more-doc-content-before,
    .v-more-doc-content-after,
    .v-link-error-list,
    .v-btn-open-in-new-tab,
    .v-toc-handle,
    .v-toolbar,
    .v-btn-outline,
    .v-chapter-nav,
    .v-nav-center,
    .v-nav-center-header,
    .v-nav-center-body,
    .v-status-bar {
        display: none !important;
        // filter: none;
    }

    .v-pg-current-item {
        box-shadow: none !important;
    }

    // 显示原始的目录
    #write .md-toc {
        display: block !important;
    }

    // 清空当前章节的样式
    .v-toc-item-current {
        background: none !important;
    }
    .v-toc-item-current a {
        color: var(--d-f-c) !important;
    }

    .v-toc {
        display: block !important;
        visibility: visible !important;
    }
}

// 针对 Dark Mode的配置
@media (prefers-color-scheme: dark) {
    :root {
        --v-color-scheme: dark;
        --v-invert-dark: var(--v-invert-dark-dk); // Dark Mode下图片滤镜
        --v-brightness-dk: var(--v-brightness-dark-dk); // Dark Mode下封面、封底滤镜

        // --------------------
        // 颜色变量
        --d-bc: var(--d-bc-dk);
        --d-bc-tsp: var(--d-bc-tsp-dk);
        --d-bi: var(--d-bi-dk);
        --d-f-c: var(--d-f-c-dk);
        --d-f-c-alt: var(--d-f-c-alt-dk);

        --pn-c: var(--pn-c-dk);
        --pn-c-alt: var(--pn-c-alt-dk);
        --pn-c-tsp: var(--pn-c-tsp-dk);
        --blockquote-bg: var(--blockquote-bg-dk);

        --a-color: var(--a-color-dk);
        --mark-bg: var(--mark-bg-dk);
        --tbl-h-br: var(--tbl-h-br-dk);
        --tbl-bder: var(--tbl-bder-dk);
        --tbl-th-bg: var(--tbl-th-bg-dk);
        --tbl-td-bg: var(--tbl-td-bg-dk);
        --tbl-cell-bder: var(--tbl-cell-bder-dk);
        --tbl-row-g-alpha: var(--tbl-row-g-alpha-dk);
        --toc-h-num-color: var(--toc-h-num-color-dk);
        --h-f: var(--h-f-dk);
        --h-box-shadow: var(--h-box-shadow-dk);
        --h-bg-start: var(--h-bg-start-dk);
        --h-bg-end: var(--h-bg-end-dk);
        --code-bg: var(--code-bg-dk);
        --std-code-shadow: var(--std-code-shadow-dk);
        --rb-code-shadow: var(--rb-code-shadow-dk);

        --key-bg: var(--key-bg-dk);
        --key-reflect: var(--key-reflect-dk);
        --key-shadow: var(--key-shadow-dk);

        --ac-red: var(--ac-red-dk);
        --ac-red-alt: var(--ac-red-alt-dk);
        --ac-red-fade: var(--ac-red-fade-dk);
        --ac-red-title: var(--ac-red-title-dk);
        --ac-orange: var(--ac-orange-dk);
        --ac-orange-alt: var(--ac-orange-alt-dk);
        --ac-orange-fade: var(--ac-orange-fade-dk);
        --ac-orange-title: var(--ac-orange-title-dk);
        --ac-yellow: var(--ac-yellow-dk);
        --ac-yellow-alt: var(--ac-yellow-alt-dk);
        --ac-yellow-fade: var(--ac-yellow-fade-dk);
        --ac-yellow-title: var(--ac-yellow-title-dk);
        --ac-lime: var(--ac-lime-dk);
        --ac-lime-alt: var(--ac-lime-alt-dk);
        --ac-lime-fade: var(--ac-lime-fade-dk);
        --ac-lime-title: var(--ac-lime-title-dk);
        --ac-green: var(--ac-green-dk);
        --ac-green-alt: var(--ac-green-alt-dk);
        --ac-green-fade: var(--ac-green-fade-dk);
        --ac-green-title: var(--ac-green-title-dk);
        --ac-aqua: var(--ac-aqua-dk);
        --ac-aqua-alt: var(--ac-aqua-alt-dk);
        --ac-aqua-fade: var(--ac-aqua-fade-dk);
        --ac-aqua-title: var(--ac-aqua-title-dk);
        --ac-cyan: var(--ac-cyan-dk);
        --ac-cyan-alt: var(--ac-cyan-alt-dk);
        --ac-cyan-fade: var(--ac-cyan-fade-dk);
        --ac-cyan-title: var(--ac-cyan-title-dk);
        --ac-blue: var(--ac-blue-dk);
        --ac-blue-alt: var(--ac-blue-alt-dk);
        --ac-blue-fade: var(--ac-blue-fade-dk);
        --ac-blue-title: var(--ac-blue-title-dk);
        --ac-sea: var(--ac-sea-dk);
        --ac-sea-alt: var(--ac-sea-alt-dk);
        --ac-sea-fade: var(--ac-sea-fade-dk);
        --ac-sea-title: var(--ac-sea-title-dk);
        --ac-purple: var(--ac-purple-dk);
        --ac-purple-alt: var(--ac-purple-alt-dk);
        --ac-purple-fade: var(--ac-purple-fade-dk);
        --ac-purple-title: var(--ac-purple-title-dk);
        --ac-rose: var(--ac-rose-dk);
        --ac-rose-alt: var(--ac-rose-alt-dk);
        --ac-rose-fade: var(--ac-rose-fade-dk);
        --ac-rose-title: var(--ac-rose-title-dk);
        --ac-pink: var(--ac-pink-dk);
        --ac-pink-alt: var(--ac-pink-alt-dk);
        --ac-pink-fade: var(--ac-pink-fade-dk);
        --ac-pink-title: var(--ac-pink-title-dk);
        --ac-gold: var(--ac-gold-dk);
        --ac-gold-alt: var(--ac-gold-alt-dk);
        --ac-gold-fade: var(--ac-gold-fade-dk);
        --ac-gold-title: var(--ac-gold-title-dk);
        --ac-brown: var(--ac-brown-dk);
        --ac-brown-alt: var(--ac-brown-alt-dk);
        --ac-brown-fade: var(--ac-brown-fade-dk);
        --ac-brown-title: var(--ac-brown-title-dk);
        --ac-gray: var(--ac-gray-dk);
        --ac-gray-alt: var(--ac-gray-alt-dk);
        --ac-gray-fade: var(--ac-gray-fade-dk);
        --ac-gray-title: var(--ac-gray-title-dk);
        --ac-theme1: var(--ac-theme1-dk);
        --ac-theme1-alt: var(--ac-theme1-alt-dk);
        --ac-theme1-fade: var(--ac-theme1-fade-dk);
        --ac-theme1-title: var(--ac-theme1-title-dk);
        --ac-theme2: var(--ac-theme2-dk);
        --ac-theme2-alt: var(--ac-theme2-alt-dk);
        --ac-theme2-fade: var(--ac-theme2-fade-dk);
        --ac-theme2-title: var(--ac-theme2-title-dk);

        // 图片 URL 参数指定是否使用网格背景
        // --v-fig-grid-l: var(--v-fig-grid-l-dk);
        // --v-fig-grid-b: var(--v-fig-grid-b-dk);

        // Mermaid 样式变量
        --mm-c-red: var(--mm-c-red-dk);
        --mm-c-red-alt: var(--mm-c-red-alt-dk);
        --mm-c-orange: var(--mm-c-orange-dk);
        --mm-c-orange-alt: var(--mm-c-orange-alt-dk);
        --mm-c-yellow: var(--mm-c-yellow-dk);;
        --mm-c-yellow-alt: var(--mm-c-yellow-alt-dk);
        --mm-c-green: var(--mm-c-green-dk);
        --mm-c-green-alt: var(--mm-c-green-alt-dk);
        --mm-c-cyan: var(--mm-c-cyan-dk);
        --mm-c-cyan-alt: var(--mm-c-cyan-alt-dk);
        --mm-c-blue: var(--mm-c-blue-dk);
        --mm-c-blue-alt: var(--mm-c-blue-alt-dk);
        --mm-c-purple: var(--mm-c-purple-dk);
        --mm-c-purple-alt: var(--mm-c-purple-alt-dk);
        --mm-c-pink: var(--mm-c-pink-dk);
        --mm-c-pink-alt: var(--mm-c-pink-alt-dk);
        --mm-c-brown: var(--mm-c-brown-dk);
        --mm-c-brown-alt: var(--mm-c-brown-alt-dk);
        --mm-c-gray: var(--mm-c-gray-dk);
        --mm-c-gray-alt: var(--mm-c-gray-alt-dk);

        // Typora 代码块着色样式变量
        --cm-keyword: var(--cm-keyword-dk);
        --cm-variable: var(--cm-variable-dk);
        --cm-variable-2: var(--cm-variable-2-dk);
        --cm-variable-3: var(--cm-variable-3-dk);
        --cm-tag: var(--cm-tag-dk);
        --cm-attribute: var(--cm-attribute-dk);
        // --cm-CodeMirror-cursor: var(--cm-CodeMirror-cursor-dk);
        --cm-string: var(--cm-string-dk);
        --cm-string-2: var(--cm-string-2-dk);
        --cm-comment: var(--cm-comment-dk);
        --cm-header: var(--cm-header-dk);
        --cm-quote: var(--cm-quote-dk);
        --cm-hr: var(--cm-hr-dk);
        --cm-link: var(--cm-link-dk);
        --cm-negative: var(--cm-negative-dk);
        --cm-positive: var(--cm-positive-dk);
        --cm-meta: var(--cm-meta-dk);
        --cm-bulidin: var(--cm-bulidin-dk);
        --cm-bracket: var(--cm-bracket-dk);
        --cm-atom: var(--cm-atom-dk);
        --cm-number: var(--cm-atom-dk);

        // --------------------
        // Typora UI 颜色变量
        --bg-color: var(--d-bc-dk);//var(--d-bc-tsp-dk); // 替换为透明色，以在 Typora 编辑时正常显示背景图片
        --side-bar-bg-color: var(--d-bc-dk);
        --text-color: var(--d-f-c-dk);

        --select-text-bg-color: @themeBgColorFade;

        --control-text-color: var(--d-f-c-dk);
        --control-text-hover-color: var(--d-f-c-dk);
        --window-border: 1px solid var(--pn-c-dk);

        --active-file-bg-color:  var(--d-bc-dk);
        --active-file-bder: var(--select-text-bg-color);
        --active-file-text-color: var(--d-f-c-dk);

        --item-hover-bg-color: var(--pn-c-dk);
        --item-hover-text-color: var(--d-f-c-dk);

        --primary-color: @themeBgColor;

        --rawblock-edit-panel-bd: var(--d-bc-dk);

        --search-select-bg-color: @themeBgColorFade;
    }

    #write img[src*="grid=line"],
    #write svg[data-inject-url*="grid=line"] {
        background: var(--v-fig-grid-l-dk);
        // background: url(@figureGridLineDark);
    }
    #write img[src*="grid=block"],
    #write svg[data-inject-url*="grid=block"] {
        background: var(--v-fig-grid-b-dk);
        // background: url(@figureGridBlockDark);
    }

    // 图片 URL 参数指定在 Dark Mode 时反色
    #write img[src*="darksrc=invert"],
    #write svg[data-inject-url*="darksrc=invert"] {
        filter: var(--v-invert-dark);
        border-color: var(--img-bder-invert) !important;
        // 使用反色后的背景，以适应在反色中显示为正常效果
        background-color: @figureSolidBgLight;
    }
    #write img[src*="darksrc=invert"][src*="grid=line"],
    #write svg[data-inject-url*="darksrc=invert"][data-inject-url*="grid=line"] {
        background: var(--v-fig-grid-l-invert);
        // background: url(@figureGridLineDarkInvert);
    }
    #write img[src*="darksrc=invert"][src*="grid=block"],
    #write svg[data-inject-url*="darksrc=invert"],[data-inject-url*="grid=block"] {
        background: var(--v-fig-grid-b-invert);
        // background: url(@figureGridBlockDarkInvert);
    }

    #write a:hover img[src*="darksrc=invert"],
    #write a:hover svg[data-inject-url*="darksrc=invert"] {
        filter: var(--v-invert-dark) brightness(1.3) !important;
    }

    // 备注文本
    .noteText tspan {
        fill: var(--d-f-c-lg) !important;
    }
}
